import 'package:flutter/material.dart';
import 'zoom_drag_widget.dart';

/// 缩放拖拽组件使用示例
class ZoomDragExample extends StatefulWidget {
  const ZoomDragExample({Key? key}) : super(key: key);

  @override
  State<ZoomDragExample> createState() => _ZoomDragExampleState();
}

class _ZoomDragExampleState extends State<ZoomDragExample> {
  final GlobalKey<ZoomDragWidgetState> _zoomDragKey = GlobalKey();
  double _currentScale = 1.0;
  Offset _currentOffset = Offset.zero;
  String _statusMessage = '使用 Ctrl + 滚轮缩放，Ctrl + 左键拖拽，Ctrl + 0 重置';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('缩放拖拽示例'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              _zoomDragKey.currentState?.resetZoom();
            },
            tooltip: '重置缩放',
          ),
        ],
      ),
      body: Column(
        children: [
          // 状态栏
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(16),
            color: Colors.grey[100],
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  _statusMessage,
                  style: const TextStyle(
                    fontSize: 14,
                    color: Colors.blue,
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  '当前缩放: ${_currentScale.toStringAsFixed(2)}x',
                  style: const TextStyle(fontSize: 12),
                ),
                Text(
                  '当前偏移: (${_currentOffset.dx.toStringAsFixed(0)}, ${_currentOffset.dy.toStringAsFixed(0)})',
                  style: const TextStyle(fontSize: 12),
                ),
              ],
            ),
          ),
          
          // 控制按钮
          Container(
            padding: const EdgeInsets.all(16),
            child: Wrap(
              spacing: 8,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _zoomDragKey.currentState?.setScale(0.5);
                    setState(() {
                      _statusMessage = '设置缩放到 50%';
                    });
                  },
                  child: const Text('缩放到 50%'),
                ),
                ElevatedButton(
                  onPressed: () {
                    _zoomDragKey.currentState?.setScale(1.0);
                    setState(() {
                      _statusMessage = '设置缩放到 100%';
                    });
                  },
                  child: const Text('缩放到 100%'),
                ),
                ElevatedButton(
                  onPressed: () {
                    _zoomDragKey.currentState?.setScale(2.0);
                    setState(() {
                      _statusMessage = '设置缩放到 200%';
                    });
                  },
                  child: const Text('缩放到 200%'),
                ),
                ElevatedButton(
                  onPressed: () {
                    _zoomDragKey.currentState?.setTranslate(0, 0);
                    setState(() {
                      _statusMessage = '重置位置到中心';
                    });
                  },
                  child: const Text('居中'),
                ),
              ],
            ),
          ),
          
          // 主要内容区域
          Expanded(
            child: ZoomDragWidget(
              key: _zoomDragKey,
              minScale: 0.3,
              maxScale: 5.0,
              scaleStep: 0.1,
              onScaleChanged: (scale) {
                setState(() {
                  _currentScale = scale;
                });
              },
              onDragChanged: (offset) {
                setState(() {
                  _currentOffset = offset;
                });
              },
              onReset: () {
                setState(() {
                  _currentScale = 1.0;
                  _currentOffset = Offset.zero;
                  _statusMessage = '已重置缩放和拖拽';
                });
                
                // 3秒后恢复原始提示
                Future.delayed(const Duration(seconds: 3), () {
                  if (mounted) {
                    setState(() {
                      _statusMessage = '使用 Ctrl + 滚轮缩放，Ctrl + 左键拖拽，Ctrl + 0 重置';
                    });
                  }
                });
              },
              child: Container(
                width: double.infinity,
                height: double.infinity,
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Colors.blue[50]!,
                      Colors.purple[50]!,
                    ],
                  ),
                ),
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      TextButton(onPressed: (){
                        print('object');
                      }, child: const Text('1')),
                      // 示例内容
                      Container(
                        width: 300,
                        height: 200,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(12),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.black.withOpacity(0.1),
                              blurRadius: 10,
                              offset: const Offset(0, 4),
                            ),
                          ],
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.zoom_in,
                              size: 48,
                              color: Colors.blue[600],
                            ),
                            const SizedBox(height: 16),
                            const Text(
                              '缩放拖拽演示区域',
                              style: TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            const SizedBox(height: 8),
                            const Text(
                              '这个区域可以被缩放和拖拽',
                              style: TextStyle(
                                fontSize: 14,
                                color: Colors.grey,
                              ),
                            ),
                          ],
                        ),
                      ),
                      
                      const SizedBox(height: 32),
                      
                      // 网格背景
                      Container(
                        width: 400,
                        height: 300,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.grey[300]!),
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: CustomPaint(
                          painter: GridPainter(),
                          child: const Center(
                            child: Text(
                              '网格背景\n用于观察缩放效果',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 16,
                                color: Colors.grey,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

/// 网格绘制器
class GridPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey[200]!
      ..strokeWidth = 1;

    const gridSize = 20.0;
    
    // 绘制垂直线
    for (double x = 0; x <= size.width; x += gridSize) {
      canvas.drawLine(
        Offset(x, 0),
        Offset(x, size.height),
        paint,
      );
    }
    
    // 绘制水平线
    for (double y = 0; y <= size.height; y += gridSize) {
      canvas.drawLine(
        Offset(0, y),
        Offset(size.width, y),
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}